<template>
    <div class="logininput">
        <label :for='name'>{{label}}</label>
        <input :type="type" :name="name" :placeholder="placeholder" @input="change" v-model="value">
    </div>
</template>

<script>
export default {
    data(){
        return {
            value:''
        }
    },
    props:[
        'label',
        'name',
        'placeholder',
        'type',
    ],
    methods:{
        change(){
            this.$emit('valueChange',this.value)
        }
    }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/common';
@import '../../assets/css/iconfont';
.logininput{
    background-color: #fff;
    display: flex;
    height: 3.8rem;
    line-height: 3.8rem;
    border-top: 1px solid rgb(240, 240, 240);
    input{
        width: 75%;
        border: 0;
        outline: none;
        font-size: 1.1rem;
    }
    label{
        flex: 1;
        font-size:1.2rem;
        padding-left: 1rem;
    }
}
</style>